<template>
    <view class="page-wrap">
        <image class="cover" :src="info.cover"></image>
        <view class="title">{{info.title}}</view>
        <view class="content">
            <u-parse :content="info.content" :show-with-animation="true" :lazy-load="true" />
        </view>
        <view class="footer">
            <view class="price">
                <text class="sell">￥{{info.sellPrice}}</text>
                <text class="original" v-if="info.originalPrice">￥{{info.originalPrice}}</text>
            </view>
            <view class="buy" :class="{'can-buy': canBuy}" @click="handleBuy">立即购买</view>
        </view>
        <global-components ref="global-components" :loading="false"></global-components>
    </view>
</template>

<script>
    import {
        mapState,
        mapMutations
    } from 'vuex';
    export default {
        data() {
            return {
                id: '',
                info: {},
                canBuy: false,
            };
        },
        computed: {
            ...mapState(['login'])
        },
        methods: {
            handleBuy() {
                if (!this.login) {
                    this.$refs['global-components'].showAuth();
                    return;
                }
                
                if(!this.canBuy) {
                        uni.showToast({
                            title: '当前无法购买!',
                            icon: 'error'
                        });
                    return;
                }
                this.$toPage({
                    url: '/pages/voucher/add',
                    params: {
                        id: this.info.id
                    }
                });
                return;
            },
        },
        watch: {},
        onLoad(option) {
            this.id = option.id;
        },
        onShow() {
            this.id && this.$api.voucher.detail({
                id: this.id
            }).then(res => {
                this.info = res.info
                this.canBuy = res.canBuy
            })
        },
        onHide() {},
        onUnload() {},
        onReachBottom() {},
        onPageScroll(event) {},
        onPullDownRefresh() {},
        onShareAppMessage(options) {}
    };
</script>

<style lang="scss">
    .page-wrap {
        background: #fff;
        padding: 0 32rpx;
        font-size: 32rpx;
        min-height: 100vh;
        padding-bottom: 130rpx;

        .cover {
            margin: 0 -32rpx;
            width: 750rpx;
            height: 480rpx;
        }

        .title {
            text-align: center;
            padding: 16rpx 0;
            border-bottom: 1rpx solid #eee;
            margin-bottom: 16rpx;
            font-weight: bold;
        }

        .footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 120rpx;
            background-color: #fff;
            left: 0;
            display: flex;
            vertical-align: center;
            box-shadow: 0 2rpx 10rpx #ccc;

            .price {
                flex: 1;
                color: #f44336;
                display: flex;
                align-items: flex-end;
                padding: 32rpx;

                .original {
                    font-size: 32rpx;
                    text-decoration: line-through;
                }

                .sell {
                    font-size: 54rpx;
                }
            }

            .buy {
                background-color: #999;
                color: #fff;
                width: 8em;
                font-size: 32rpx;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .can-buy {
                background-color: $primary-color;
            }
        }
    }
</style>